<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>下拉某一距离导航固定实例</title>
		<meta http-equiv="keywords" content="">
	    <meta http-equiv="description" content="">
	    <!--<meta http-equiv="X-UA-Compatible" content=“IE=EmulateIE8″>-->
	    <meta http-equiv="X-UA-Compatible" content=”IE=Edge,chrome=1″ />
	    <meta name="renderer" content="webkit">
	    <link rel="stylesheet" href="style/css/base/MyReset.css" />
	    <style>
	    	.wrapFix{
			    height:9000px;
			    padding-top:300px;
			    width:800px;
			    margin:auto;
			}
			.navFix{
			    width:800px;
			    height:50px;
			    background:#099;
			    color:#fff;
			    font-size: 16px;
			    line-height:50px;
			    text-align:center;
			}
	    </style>
	</head>
	<body>
		<div class="wrapFix" id="wrap">
		    <div class="navFix" id="nav">下拉【固定导航】</div>
		</div>
		<script type="text/javascript" src="style/js/base/jquery-1.9.1.min.js" ></script>
		<script>
			$(document).ready(function(e) {
			    $(window).scroll(function(){
			        if($(window).scrollTop()>300){
			            $('#nav').css({'position':'fixed','top':'0'})
			        }else{
			            $('#nav').css({'position':'relative'})
			        }
			         
			        });
			});
		</script>
	</body>
</html>
